<template>
  <div class="etiduser">
    <div style="margin:0 0 10px 0;">
      <nav-bar />
    </div>
    <div class="dw">
      <van-uploader :after-read="afterRead" preview-size="100vw" />
      <eitd-userput eidtName="头像">
        <img :src="model.user_img" slot="right" class="etidImg" v-if="model.user_img" />
        <img src="../assets/user.jpg" slot="right" class="etidImg" v-else />
      </eitd-userput>
    </div>
    <eitd-userput eidtName="昵称" @uploadBtn="isShow=true">
      <a href="javaScript:;" slot="right">{{model.name}}</a>
    </eitd-userput>
    <van-dialog v-model="isShow" title="标题" show-cancel-button @confirm="usernameXg" autofocus @cancel="value=''">
      <van-field v-model="value" placeholder="请输入要修改的用户名" />
    </van-dialog>
    <eitd-userput eidtName="UID">
      <a href="javaScript:;" slot="right">{{model.id}}</a>
    </eitd-userput>
    <eitd-userput eidtName="性别" @uploadBtn="isShow3=true">
      <a href="javaScript:;" slot="right">{{model.gender == 1 ? '女' : '男'}}</a>
    </eitd-userput>
    <van-action-sheet
      v-model="isShow3"
      :actions="actions"
      cancel-text="取消"
      @select="genderClick"
      close-on-click-action
    />
    <eitd-userput eidtName="个性签名" @uploadBtn="isShow4=true">
      <a href="javaScript:;" slot="right" v-if="model.user_desc">{{model.user_desc}}</a>
      <a href="javaScript:;" slot="right" v-else>吃鱼吃鱼！！！</a>
    </eitd-userput>
    <van-dialog
      v-model="isShow4"
      title="修改个性签名！！"
      show-cancel-button
      @confirm="userTextXg"
      @cancel="value=''"
    >
      <van-field v-model="value" placeholder="请输入你要修改的个性签名!" autofocus />
    </van-dialog>
    <div style="margin-top:9.722vw">
      <eitd-btn />
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/Navbar";
import EitdUserput from "@/components/EitdUserput";
import EitdBtn from "@/components/EitdBtn";
export default {
  components: {
    NavBar,
    EitdUserput,
    EitdBtn
  },
  data() {
    return {
      model: {},
      isShow: false,
      isShow3:false,
      isShow4: false,
      value: "",
      actions:[
        { name: '男' , val : 1 },
        { name: '女' , val : 0}
      ]
    };
  },
  methods: {
    async userAxiios() {
      const res = await this.$http.get("/user/" + localStorage.getItem("id"));
      this.model = res.data[0];
    },
    async afterRead(file) {
      const filedate = new FormData();
      filedate.append("file", file.file);
      const res = await this.$http.post("/upload", filedate);
      this.model.user_img = res.data.url;
      this.UserUpdate();
    },
    async UserUpdate() {
      const res = await this.$http.post(
        "/update/" + localStorage.getItem("id"),
        this.model
      );
    },
    usernameXg() {
      this.model.name = this.value;
      this.UserUpdate();
    },
    userTextXg() {
      this.model.user_desc = this.value;
      this.UserUpdate();
    },
    genderClick(a,b){
      this.model.gender = b
       this.UserUpdate();
    }
  },
  created() {
    this.userAxiios();
  }
};
</script>

<style lang="less" scoped>
.etiduser {
  color: #ccc;
  .etidImg {
    width: 13.611vw;
    height: 13.611vw;
    border-radius: 50%;
    box-shadow: 0 0 10px #ccc;
  }
}
a {
  color: #000;
}
.dw {
  position: relative;
  overflow: hidden;
  .van-uploader {
    position: absolute;
    opacity: 0;
  }
}
</style>